<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			#box{
				height:100px;
				width:100px;
				background-color: orange;
				position: relative;
				left:0;
				top:0;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
		<script>
			//周期性定时器 变成 一次性定时器，要用递归
			//注意： 递归一定要停止（return）
			
			//固定速度移动盒子  speed=20
			//找到小盒子
			let box=document.getElementById("box");
			let html=document.documentElement||document.body;
			
			//速度：假设每10ms，移动20px（固定的速度）
			let speed=20,l=0;
			let allWidth=html.clientWidth-box.offsetWidth;
			
			let timer=null;
			//添加点击事件
			box.onclick=function(){
				function fn(){
					timer=setTimeout(function(){
						l+=speed;
						//停止动画
						if(l>=allWidth){
							clearTimeout(timer);
							timer=null;
							box.style.left=allWidth+"px";
							return;//停止递归----必须要用return
						}
						box.style.left=l+"px";
						fn();
					},10)
				}
				fn();//第一次执行 fn()
			}
		</script>
	</body>
</html>
